import { useReducer } from "react"

type CounterState = {
    count: number
}

type CounterAction = { type: 'INCREMENT' } | { type: 'DECREMENT' }

const initState: CounterState = { count: 0 }

const counterReducer = (state: CounterState, action: CounterAction): CounterState => {
    switch (action.type) {
        case 'INCREMENT': {
            return { count: state.count + 1 }
        }
        case 'DECREMENT': {
            return { count: state.count - 1 }
        }
        default:
            return state
    }
}

export function Counter() {
    const [state, dispatch] = useReducer(counterReducer, initState)

    return (
        <>
            <p>Count: {state.count}</p>
            <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
            <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
        </>
    )
}